<style lang="less" scoped>
.cart-box {
  width: 100%;
  padding: 0.75rem;
  // background-color: aqua;

  .view {
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }
  .image {
    width: 100%;
    height: 15rem;
    margin-bottom: 2.9rem;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .tage {
      position: absolute;
      top: 0.6rem;
      right: 1.6rem;
      display: inline-block;
      padding: 0.15rem 0.6rem;
      font-size: 0.65rem;
      color: #fff;
      background: rgba(43, 162, 69, 1);
      border-radius: 1rem;
    }
    .info {
      position: absolute;
      bottom: 0.6rem;
      right: 1.6rem;
      display: inline-block;
      padding: 0.15rem 0.6rem;
      font-size: 1.07rem;
      text-align: right;
      color: #fff;
    }
  }
  .button {
    padding: 1.68rem 2.79rem;
  }
  .radios {
    padding: 0rem 1.6rem;
    font-size: 1.1rem;
    color: #999;
    .icon {
      width: 1.5rem;
      height: 1.5rem;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 50%;
      margin-right: 0.335rem;
      position: relative;
    }
    .icon-select {
      width: 1.5rem;
      height: 1.5rem;
      background: #2ba245;
      border-radius: 50%;
      margin-right: 0.335rem;
      position: relative;
    }
    .icon-select::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M479.287 761.117c-28.762 28.039-75.489 28.039-104.251 0L140.297 531.414c-28.762-28.039-28.762-74.052 0-102.087s75.489-28.039 104.251 0l182.615 178.658L779.09 263.249c28.762-28.039 75.489-28.039 104.251 0s28.762 74.052 0 102.087L479.293 761.117z' fill='%23fff'/%3E%3C/svg%3E");
    }
  }
}

.tabs {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  .indicator {
    border-bottom: 1px solid #1980ff;
  }
  div {
    padding: 0.85rem 0rem;
  }
}
.cart-list {
  width: 100%;
  height: calc(100% - (0.85rem * 2) - 0.95rem);
  // background-color: #2ba245;
  overflow-y: scroll;
  padding-bottom: 10rem;
  position: relative;
}
.refresh {
  position: absolute;
  bottom: 1rem;
  left: 0rem;
  text-align: center;
  color: #999;
}
</style>
<template>
  <div class="w-100 h-100">
    <!-- <notific-ation content="zxcasd" windowType="window"></notific-ation> -->
    <div class="tabs w-100 bg-white d-flex-row align-items-center">
      <div
        @click="switchTable('carry')"
        :class="indicator === 'carry' ? 'indicator color-blue':''"
        class="w-50 flex-shrink-0 text-center"
      >进行中</div>
      <div
        @click="switchTable('fulfill')"
        :class="indicator === 'fulfill' ? 'indicator color-blue':''"
        class="w-50 flex-shrink-0 text-center"
      >已完成</div>
    </div>
    <div ref="cartList" class="cart-list">
      <div class="cart-box"
        v-for="(item, index) in taskList"
        :key="index"
        
      >
        <div v-if="indicator === 'carry' ? !item.isValue : true" class="view">
        <!-- <div class="view"> -->

          <div class="image">
            <div :style="{background: indicator === 'fulfill' ? '#999':''}" class="tage d-flex-rwo d-flex-center">{{indicator === 'carry' ? ifTime(index) : '已完成'}}</div>
            <img :src="item.image" />
            <div class="info">
              <p style="font-size: 1.5rem; margin: 0.25rem;">{{item.fromname}}</p>
              <p>{{item.name}}</p>
            </div>
          </div>
          <div v-if="indicator === 'carry'" class="radios w-100 d-flex-row align-items-center justify-content-between">
            <div @click="switchValue(90,index)" class="d-flex-row aling-items-center">
              <i :class="item.value === 90 ? 'icon-select':'icon'"></i>
              <span>优秀</span>
            </div>
            <div @click="switchValue(80,index)" class="d-flex-row aling-items-center">
              <i :class="item.value === 80 ? 'icon-select':'icon'"></i>
              <span>良好</span>
            </div>
            <div @click="switchValue(60,index)" class="d-flex-row aling-items-center">
              <i :class="item.value === 60 ? 'icon-select':'icon'"></i>
              <span>合格</span>
            </div>
            <div @click="switchValue(50,index)" class="d-flex-row aling-items-center">
              <i :class="item.value === 50 ? 'icon-select':'icon'"></i>
              <span>不合格</span>
            </div>
          </div>
          <div v-if="indicator === 'carry'" class="w-100 button">
            <div @click="pushValue(item.id, index)" class="max-button">提交</div>
          </div>
        </div>
      </div>
      <!-- <div v-show="isRefresh" class="refresh w-100">
        下拉刷新
      </div> -->
    </div>
  </div>
</template>
<script>

/**
 * 打分
 */
export default {
  name: "score",
  data() {
    return {
      indicator: "carry", // value: carry | fulfill
      taskList: [],
      page: 1,
      isRefresh: false
    };
  },
  created(){
    this.getList()
  },
  mounted() {
    this.$nextTick(()=>{
      this.$refs.cartList.onscroll = this.scrollFunc
      // console.dir(this.$refs.cartList);
    })
  },
  methods: {
    switchTable(val) {
      this.indicator = val;
      this.page = 1
      this.taskList = []
      this.getList(true)
      
    },
    switchValue(val,index) {
      this.taskList[index].value = val;
    },
    getList(flag){
      this.API.getTaskIndex({
        page: this.page,
        rated: this.indicator === 'fulfill' ? 1 : 0,
      })
        .then((result) => {
          if(result.code > 0){
            console.log(result)
            if(this.taskList.length === result.data.total) {
              this.$NotificAtion('到底了')
              return ;
            } else {
              this.page = this.page + 1
            }
            let _list = result.data.rows.map((item)=>{
              item.value = null
              item.isValue = false
              return item
            })
            this.taskList = this.taskList.concat(_list)
            
            
            setTimeout(()=>{
              this.isRefresh = false
            }, 1000)
            
          } else {
            this.$NotificAtion(result.msg)
            setTimeout(()=>{
              this.isRefresh = false
            }, 1000)
          }
        }).catch((err) => {
          console.error(err)
          this.$NotificAtion(err.msg) 
          setTimeout(()=>{
            this.isRefresh = false
          }, 1000)
        });
    },
    pushValue(id, index) {
      if (this.taskList[index].isValue) {
        return ;
      }
      this.API.getTaskRate({
        taskId: id,
        rate: this.taskList[index].value
      })
        .then((result) => {
          console.log(result)
          if(result.code > 0) {
            this.$NotificAtion(result.msg, 'window')
            this.taskList[index].isValue = true
            this.taskList[index].rated = 1
          } else {
            this.$NotificAtion(result.msg) 
          }
        }).catch((err) => {
          console.error(err)
          this.$NotificAtion(err.msg) 
        });
    },
    scrollFunc(val){
      if(val.srcElement) {
        // console.dir(val.srcElement);
        // console.log(val.srcElement.scrollTop);
        let _dom = val.srcElement
        let _scrollTop = _dom.scrollTop
        let _scrollHeight = _dom.scrollHeight
        if((_scrollHeight - _scrollTop) < (_dom.clientHeight + 100)) {
          console.log('到底');
          if(!this.isRefresh) {
            this.isRefresh = true
            this.getList()
          }
        }
      }
    },
    ifTime(index) {
      let time = new Date().getTime()
      let _state = ''
      if (time > (this.taskList[index].begin_time * 1000)) {
        if (time < (this.taskList[index].end_time * 1000)) {
          _state = '进行中'
        } else {
          _state = '已结束'
        }
      } else {
        _state = '暂未开始'
      } 
      return _state
    }
  }
};
</script>
